<template>
  <div class="articles">
    <!-- 上部的表单 -->
    <el-card class="box-card">
      <template v-slot:header>
        <my-breadcrumb>内容管理</my-breadcrumb>
      </template>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <!-- <el-select v-model="form.channel_id" placeholder="请选择频道" clearable>
            <el-option v-for="item in channels" :key='item.id' :label="item.name" :value="item.id"></el-option>
          </el-select> -->
          <my-channels v-model="form.channel_id"></my-channels>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="form.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 下半部卡片 -->
    <el-card class="box-card">
        <template v-slot:header>
            <div>根据筛选条件共查询到{{total_count}}条结果：</div>
        </template>
        <!--
            el-table整个的 表格组件
                (1) :data配置表格渲染的数据
                (2) style='width: 100%'设置表格宽
            el-table-column表格的一列
                (1)label配置列的名字
                (2) prop配置列的数据，需要指定成遍历得到的对象的属性
                (3) width 列宽
         -->
          <el-table :data="articles" v-loading='loading'>
        <el-table-column label="封面">
          <template v-slot:default='obj'>
            <el-image
              style="width:150px;height:100px"
              :src='obj.row.cover.images[0]'
              fit='cover'
            >
              <div slot="error">
                <img src="@/assets/error.gif" style="width:150px;height:100px">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template v-slot:default='obj'>
            <el-tag v-if="obj.row.status===0">草稿</el-tag>
            <el-tag v-if="obj.row.status===1" type="info">待审核</el-tag>
            <el-tag v-if="obj.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-if="obj.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-if="obj.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate"></el-table-column>
        <el-table-column label="操作">
          <!-- 默认插槽 -->
          <template v-slot:default="obj">
            <el-button @click='edit(obj.row.id)' size="mini" type="primary" icon="el-icon-edit" circle></el-button>
          <el-button @click="del(obj.row.id)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change='handleCurrentChange'
        background
        layout="prev, pager, next"
        :total="total_count">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import MyBreadcrumb from '@/components/my-breadcrumb.vue'
import MyChannels from '@/components/my-channels.vue'
import { reqGetArticles, reqDeleteArticle } from '@/api/articles.js'
export default {
  name: 'Articles',
  data () {
    return {
      form: {
        date: [],
        channel_id: null,
        status: null // 文章的默认状态，不传这个参数，就是全部数据
      },
      total_count: 0,
      articles: [],
      currentPage: 1,
      channels: [], // 列表频道
      loading: false,
      // 准备一个对象，存储着所有的筛选条件
      query: {
        begin_pubdate: null, // 开始日期
        end_pubdate: null, // 结束日期
        status: null, // 状态
        channel_id: null // 频道id
      }
    }
  },
  components: {
    MyBreadcrumb,
    MyChannels
  },
  created () {
    this.loadArticles()
  },
  methods: {
    del (id) {
      console.log(id.toString())
      const articleId = id.toString()
      this.$confirm('你确认要删除嘛?', '警告', {
        type: 'warning'
      }).then(() => {
        reqDeleteArticle(articleId).then(res => {
          // 删除成功
          this.$message.success('删除成功')
          // 重新加载当前页数据
          this.loadArticles()
        }).catch((err) => {
          this.$message.error('数据暂时无法删除')
          return err
        }).catch(() => {
          console.log('取消删除')
        })
      })
    },
    edit (id) {
      const articleId = id.toString()
      // 编程式导航
      this.$router.push(`/edit-article/${articleId}`)
    },
    loadArticles () {
      // 开启loading 加载
      this.loading = true
      reqGetArticles({
        page: this.currentPage,
        ...this.query // 获取最新的数据发送请求，对象解构
      }).then(res => {
        this.articles = res.data.data.results
        this.total_count = res.data.data.total_count
        // 响应完成后关闭loading
        this.loading = false
        // console.log(this.articles)
        console.log(res.data.data)
      })
    },
    search () {
      // 重置页码
      this.currentPage = 1
      // 从数组中解构出需要的开始时间和结束时间,undefined这边不用处理，axios如果遇到了传值是undefined或者null，会忽略这个参数
      const [beginPubdate, endPubdate] = this.form.date || []
      // 一点查询，更新查询筛选条件
      this.query = {
        begin_pubdate: beginPubdate, // 开始日期
        end_pubdate: endPubdate, // 结束日期
        status: this.form.status, // 状态
        channel_id: this.form.channel_id || null // 频道的id
      }
      // 再次调用查询方法
      // this.currentPage = index
      this.loadArticles()
    },
    handleCurrentChange (index) {
      // console.log(index)
      // index变化后的当前页
      this.currentPage = index
      this.loadArticles()
    }
  }
}
</script>

<style lang='less' scoped>
.box-card {
    margin-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
